<style scoped>
.el-breadcrumb:last-child{
    margin-bottom: 5px;
}
</style>

<template>
    <div class="row">
        <el-checkbox v-model="comp.enabled">{{ comp.__classname__ }}</el-checkbox>
        <el-button round size="small" :icon="Document" @click="gm.toConsole(comp)"></el-button>
    </div>

    <div class="row-start">
        <el-text class="span-title" truncated>Target</el-text>
        <el-input size="small" disabled :value="gm.targetName(comp.target)" />
    </div>

    <div class="row-start">
        <el-text class="span-title" truncated>Interactable</el-text>
        <el-checkbox v-model="comp.interactable" />
    </div>

    <div class="row-start">
        <el-text class="span-title" truncated>Transition</el-text>
        <el-select v-model="comp.transition" size="small">
            <el-option v-for="item in transition.__enums__" :key="item.value" :label="item.name" :value="item.value" />
        </el-select>
    </div>

    <div v-if="comp.transition == transition.COLOR">
        <div class="row-start">
            <el-text class="span-title" truncated>NormalColor</el-text>
            <el-color-picker size="small" color-format="hex" show-alpha v-model="Model.normalColor" />
            <el-input size="small" v-model="Model.normalColor" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>PressedColor</el-text>
            <el-color-picker size="small" color-format="hex" show-alpha v-model="Model.pressedColor" />
            <el-input size="small" v-model="Model.pressedColor" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>HoverColor</el-text>
            <el-color-picker size="small" color-format="hex" show-alpha v-model="Model.hoverColor" />
            <el-input size="small" v-model="Model.hoverColor" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>DisabledColor</el-text>
            <el-color-picker size="small" color-format="hex" show-alpha v-model="Model.disabledColor" />
            <el-input size="small" v-model="Model.disabledColor" />
        </div>
    </div>

    <div v-if="comp.transition == transition.SPRITE">
        <div class="row-start">
            <el-text class="span-title" truncated>NormalSprite</el-text>
            <el-input size="small" disabled v-model="Model.normalSprite" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>PressedSprite</el-text>
            <el-input size="small" disabled v-model="Model.pressedSprite" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>HoverSprite</el-text>
            <el-input size="small" disabled v-model="Model.hoverSprite" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>DisabledSprite</el-text>
            <el-input size="small" disabled v-model="Model.disabledSprite" />
        </div>
    </div>

    <div v-if="comp.transition == transition.SCALE">
        <div class="row-start">
            <el-text class="span-title" truncated>ZoomScale</el-text>
            <el-input-number size="small" :controls="false" :step="0.1" v-model="comp.zoomScale" />
        </div>
        <div class="row-start">
            <el-text class="span-title" truncated>Duration</el-text>
            <el-input-number size="small" :controls="false" :step="0.1" v-model="comp.duration" />
        </div>
    </div>

    <div class="row-start">
        <el-text class="span-title" truncated>ClickEvents</el-text>
    </div>
    <div class="span-left-20" v-for="data in gm.toEvents(comp.clickEvents)">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item>{{ data.target }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ data.component }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ data.handler }}</el-breadcrumb-item>
            <el-breadcrumb-item>{{ data.customEventData }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>

<script lang="ts" setup>
import { Document, ArrowRight } from '@element-plus/icons-vue'
import gm from './gm';

const props = defineProps<{
    comp: CCComponent,
    update: Number,
}>()
const transition = cc.Button.Transition

class Model{
    static get comp() {
        return props.comp
    }

    static get normalColor(){
        return gm.toHexColor(this.comp.normalColor)
    }
    static get pressedColor(){
        return gm.toHexColor(this.comp.pressedColor)
    }
    static get hoverColor(){
        return gm.toHexColor(this.comp.hoverColor)
    }
    static get disabledColor(){
        return gm.toHexColor(this.comp.disabledColor)
    }
    static set normalColor(value){
        this.comp.normalColor = gm.toCCColor(value)
    }
    static set pressedColor(value){
        this.comp.pressedColor = gm.toCCColor(value)
    }
    static set hoverColor(value){
        this.comp.hoverColor = gm.toCCColor(value)
    }
    static set disabledColor(value){
        this.comp.disabledColor = gm.toCCColor(value)
    }

    static get normalSprite(){
        return this.comp.normalSprite?.name
    }
    static get pressedSprite(){
        return this.comp.pressedSprite?.name
    }
    static get hoverSprite(){
        return this.comp.hoverSprite?.name
    }
    static get disabledSprite(){
        return this.comp.disabledSprite?.name
    }
}
</script>